<template>
  <!-- <el-aside class="com-aside" width="auto"> -->
  <el-menu
    class="el-menu-vertical-demo"
    background-color="#545c64"
    text-color="#fff"
    :collapse="!$store.state.isCollapse"
    :collapse-transition="true"
    mode="vertical"
    collapse="true"
  >
    <el-menu-item>
      <!-- <el-sub-menu :show-timeout="300" :hide-timeout="300"> -->
      <h3>{{ !$store.state.isCollapse ? '后台' : '通用管理后台系统' }}</h3>
      <!-- </el-sub-menu> -->
    </el-menu-item>
    <!-- <h3>通用管理后台系统</h3> -->
    <el-menu-item
      v-for="item in noChildren()"
      :key="item.name"
      :index="item.name"
      @click="ClickPath(item)"
    >
      <component class="icons" :is="item.icon"></component>
      <span slot="title">{{ item.label }}</span>
    </el-menu-item>

    <el-sub-menu
      v-for="item in hasChildren()"
      :key="item.label"
      :index="item.label"
      :show-timeout="300"
      :hide-timeout="300"
    >
      <template #title>
        <component class="icons" :is="item.icon"></component>
        <span slot="title">{{ item.label }}</span>
      </template>
      <el-menu-item-group
        v-for="subitem in item.children"
        :key="subitem.path"
        :index="subitem.path"
      >
        <el-menu-item :index="subitem.path" @click="ClickPath(subitem)">{{
          subitem.label
        }}</el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
  </el-menu>
  <!-- </el-aside> -->
</template>
<script>
// import Cookie from 'js-cookie'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'

export default {
  setup() {
    let store = useStore()
    let router = useRouter()

    const noChildren = () => {
      return storeList.filter((item) => !item.children)
    }
    const hasChildren = () => {
      return storeList.filter((item) => item.children)
    }
    const storeList = store.state.menu
    const ClickPath = (item) => {
      if (
        router.path !== item.path &&
        !(router.path === '/home' && item.path === '/')
      ) {
        router.push(item.path)
        // store.commit('selectcrumb', item)
      }
      store.commit('selectMenu', item)
    }
    return {
      noChildren,
      hasChildren,
      ClickPath,
      storeList,
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
  },
}
</script>
<style lang="less" scoped>
.icons {
  width: 18px;
  height: 18px;
}

.el-menu {
  overflow-y: hidden;
  border-right: none;
  height: 100%;
  border-right: none;
  h3 {
    color: white;
    text-align: center;
    line-height: 48px;
    font-size: 16px;
    font-weight: 400;
  }
}
</style>
